<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="交付项目阶段列表"
        data-page-identification="q_7471wf97mf"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_rfy5flc4m7 自定义模板_15kyhm4okc -->
            <div class="xmjd-main">
                <div style="height: 50px; margin-bottom: 0px; padding-top: 10px">
                    <a-row :gutter="24" style="height: 32px; margin-bottom: 16px">
                        <a-col :span="6" style="height: 32px">
                            <a-form-item :label="category === 1 ? '里程碑阶段状态' : '项目阶段状态'">
                                <a-select
                                    v-model:value="milepostState.searchForm.milepostName"
                                    :showArrow="true"
                                    :filterOption="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    :dropdownMatchSelectWidth="true"
                                    :showSearch="true"
                                    :placeholder="'请选择项目阶段'"
                                    :options="milepostState.milepostList"
                                    @focus="getMlNameList"
                                    :allowClear="true"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" style="height: 32px">
                            <a-form-item :label="category === 1 ? '里程碑阶段状态' : '项目阶段状态'">
                                <a-select
                                    v-model:value="milepostState.searchForm.milepostStatus"
                                    :options="[
                                        { label: '未启动', value: '未启动' },
                                        { label: '进行中', value: '进行中' },
                                        { label: '完成', value: '完成' },
                                        { label: '延期', value: '延期' },
                                        { label: '延期完成', value: '延期完成' }
                                    ]"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" style="height: 32px">
                            <a-form-item label="工时投入情况">
                                <a-select
                                    v-model:value="milepostState.searchForm.stateInput"
                                    :options="[
                                        { label: '正常', value: '正常' },
                                        { label: '超出', value: '超出' }
                                    ]"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" style="height: 32px">
                            <a-space>
                                <a-button type="primary" @click="getMilepostTableData">查询</a-button>
                                <a-button @click="resetMilepostList" type="primary" ghost>重置</a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </div>
                <div class="milepost-title">
                    <div style="width: 50%; margin-left: 8px">项目阶段列表</div>
                    <div
                        ><a-button
                            v-permission="'50001247_vid_baf6ux8ddw'"
                            type="primary"
                            :disabled="category === 1"
                            @click="handleCreateMilepost"
                        >
                            <template #icon><PlusOutlined /></template>
                            新建</a-button
                        ></div
                    >
                </div>
                <div class="milepost-table">
                    <a-table
                        :columns="mileColums"
                        :data-source="milepostState.dataSource"
                        :scroll="{ x: 'max-content', y: taskTableHeight + 30 }"
                        bordered
                        :pagination="false"
                        @resizeColumn="handleTaskResizeColumn"
                    >
                        <template #bodyCell="{ column, record, text }">
                            <template v-if="column.dataIndex === 'finishSchedule'">
                                <div class="progress-box">
                                    <a-progress :size="80" :percent="record.finishSchedule" status="active" />
                                </div>
                            </template>
                            <template v-if="column.dataIndex === 'timeSchedule'">
                                <div class="progress-box">
                                    <a-progress :size="80" :percent="record.timeSchedule" status="active" />
                                </div>
                            </template>

                            <template v-if="column.dataIndex === 'operation'">
                                <a-space
                                    ><a-button
                                        v-if="category !== 1"
                                        v-permission="'50001247_vid_g3und3ejm8'"
                                        size="small"
                                        type="link"
                                        @click="handlerCheckMilepost(record)"
                                    >
                                        检查
                                    </a-button>
                                    <a-button
                                        v-if="category !== 1"
                                        v-permission="'50001247_vid_g6l7bretn2'"
                                        size="small"
                                        type="link"
                                        @click="handlerEditMilepost(record)"
                                    >
                                        编辑
                                    </a-button>
                                    <a-popconfirm
                                        v-permission="'50001247_vid_1b5ymp1v54'"
                                        title="确定要删除吗？"
                                        @confirm="handlerDeleteMilepost(record)"
                                    >
                                        <a-button
                                            v-permission="'50001247_vid_1b5ymp1v54'"
                                            v-if="category !== 1"
                                            size="small"
                                            type="link"
                                        >
                                            删除
                                        </a-button>
                                    </a-popconfirm></a-space
                                >
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
            <a-modal
                :visible="milepostState.addOrEditMilepostVisible"
                :title="milepostState.title"
                destroyOnClose
                centered
                width="50%"
                :body-style="{ maxHeight: '700px', overflow: 'auto' }"
                @cancel="milepostStateCancel"
                @ok="handleSubmitMilePost"
                :ok-button-props="{ loading: milepostState.okLoading }"
            >
                <a-form ref="milepostRef" :model="milepostState.dataList">
                    <div v-for="(item, index) in milepostState.dataList" :key="index" class="form-item">
                        <div class="form-content-milepost">
                            <a-row>
                                <a-col :span="12">
                                    <a-form-item
                                        label="项目阶段名称"
                                        :name="[index, 'milepostName']"
                                        :rules="{ required: true, message: '请选输入项目阶段名称!', trigger: 'blur' }"
                                    >
                                        <a-input v-model:value="milepostState.dataList[index].milepostName" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="关联检查清单">
                                        <a-select
                                            allow-clear
                                            placeholder="请选择关联检查清单"
                                            v-model:value="milepostState.dataList[index].projectPhaseId"
                                            :field-names="{ label: 'projectPhaseName', value: 'projectPhaseId' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return (
                                                        option.projectPhaseName
                                                            .toLowerCase()
                                                            .indexOf(input.toLowerCase()) >= 0
                                                    )
                                                }
                                            "
                                            :options="milepostState.projectPhaseList"
                                            showSearch
                                            @focus="getGprojectPhase()"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="12" v-if="category === 2">
                                    <a-form-item
                                        label="项目阶段起止时间"
                                        :name="[index, 'timeRangeList']"
                                        :rules="{ required: true, message: '请选择项目阶段起止时间!' }"
                                    >
                                        <a-range-picker
                                            v-model:value="milepostState.dataList[index].timeRangeList"
                                            valueFormat="YYYY-MM-DD"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item
                                        label="项目阶段序号"
                                        :name="[index, 'serialNumber']"
                                        :rules="{ required: true, message: '请输入项目阶段序号!' }"
                                    >
                                        <a-input-number
                                            style="width: 100%"
                                            v-model:value="milepostState.dataList[index].serialNumber"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="项目阶段预算(元)" :name="[index, 'milestoneBudget']">
                                        <a-input-number
                                            v-model:value="milepostState.dataList[index].milestoneBudget"
                                            style="width: 100%"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row />
                            <a-row class="one-line">
                                <a-col :span="24">
                                    <a-form-item label="备注">
                                        <a-textarea
                                            placeholder="请输入备注"
                                            v-model:value="milepostState.dataList[index].description"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row class="one-line" v-if="milepostState.isEdit">
                                <a-col :span="24">
                                    <a-form-item
                                        :name="[index, 'reasonsChange']"
                                        label="变更原因"
                                        :rules="[{ required: true, message: '请输入变更原因', trigger: 'blur' }]"
                                    >
                                        <a-textarea
                                            placeholder="请输入变更原因"
                                            v-model:value="milepostState.dataList[index].reasonsChange"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                        <a v-if="!milepostState.isEdit" class="del" @click="handlerDeleteMilepostItem(index)">删除</a>
                    </div>
                </a-form>
                <a-button
                    v-if="!milepostState.isEdit"
                    type="primary"
                    ghost
                    class="add-btn-milepost"
                    @click="handlerAddMilepostItem"
                >
                    <plus-outlined />
                    添加
                </a-button>
            </a-modal>
            <!--检查-->
            <a-modal
                :visible="milepostState.checkVisible"
                title="检查清单"
                width="800px"
                :body-style="{ maxHeight: '800px', overflowY: 'auto' }"
                :footer="null"
                @cancel="milepostState.checkVisible = false"
            >
                <a-tabs v-model:activeKey="milepostState.activeKey" type="card">
                    <a-tab-pane key="1" tab="交付部">
                        <div class="check-table">
                            <a-table
                                bordered
                                :scroll="{ y: '600px' }"
                                :columns="checkColumns"
                                :data-source="milepostState.jfData"
                                :pagination="false"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'number'">
                                        {{ index + 1 }}
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="产品部">
                        <div class="check-table">
                            <a-table
                                bordered
                                :scroll="{ x: '600px' }"
                                :columns="checkColumns"
                                :data-source="milepostState.cpData"
                                :pagination="false"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'number'">
                                        {{ index + 1 }}
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="解决方案">
                        <div class="check-table">
                            <a-table
                                bordered
                                :scroll="{ x: '600px' }"
                                :columns="checkColumns"
                                :data-source="milepostState.jjfaData"
                                :pagination="false"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'number'">
                                        {{ index + 1 }}
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="4" tab="售前部">
                        <div class="check-table">
                            <a-table
                                bordered
                                :scroll="{ x: '600px' }"
                                :columns="checkColumns"
                                :data-source="milepostState.sqfaData"
                                :pagination="false"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'number'"> </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="5" tab="销售部">
                        <div class="check-table">
                            <a-table
                                bordered
                                :scroll="{ x: '600px' }"
                                :columns="checkColumns"
                                :data-source="milepostState.xsbfaData"
                                :pagination="false"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'number'"> </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="财务">
                        <div class="check-table">
                            <a-table
                                bordered
                                :scroll="{ x: '600px' }"
                                :columns="checkColumns"
                                :data-source="milepostState.cwfaData"
                                :pagination="false"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'number'"> </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="6" tab="平台研发部">
                        <div class="check-table">
                            <a-table
                                bordered
                                :scroll="{ x: '600px' }"
                                :columns="checkColumns"
                                :data-source="milepostState.ptfaData"
                                :pagination="false"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'number'">
                                        {{ index + 1 }}
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </a-modal>
            <!-- end vid_rfy5flc4m7 自定义模板_15kyhm4okc -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'useProjectId': {
            type: [String, Number],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const projectId = ref()
    //项目阶段
    const milepostState = reactive({
        searchForm: {
            stateInput: undefined,
            milepostStatus: undefined,
            milepostName: undefined
        },
        isEdit: false,
        okLoading: false,
        addOrEditMilepostVisible: false,
        title: '',
        dataList: [],

        milepostList: [],
        dataSource: [],
        // 检查清单
        projectPhaseList: [],
        jfData: [],
        cpData: [],
        jjfaData: [],
        sqData: [],
        xsData: [],
        cwData: [],
        ptData: [],
        checkVisible: false,
        activeKey: '1'
    })
    const state = reactive({
        tableHeight: 400,
        projectDetail: {}
    })
    function handlerCheckMilepost(record) {
        post('/solution-ppm/api/v2/built-in-system-ppm/checklist/queryPpmMilepostChecklistList', {
            milepostId: record.milepostId,
            role: '交付部'
        }).then(data => {
            milepostState.jfData = data.dataList
        })
        post('/solution-ppm/api/v2/built-in-system-ppm/checklist/queryPpmMilepostChecklistList', {
            milepostId: record.milepostId,
            role: '产品部'
        }).then(data => {
            milepostState.cpData = data.dataList
        })
        post('/solution-ppm/api/v2/built-in-system-ppm/checklist/queryPpmMilepostChecklistList', {
            milepostId: record.milepostId,
            role: '解决方案'
        }).then(data => {
            milepostState.jjfaData = data.dataList
        })
        post('/solution-ppm/api/v2/built-in-system-ppm/checklist/queryPpmMilepostChecklistList', {
            milepostId: record.milepostId,
            role: '售前部'
        }).then(data => {
            milepostState.sqData = data.dataList
        })
        post('/solution-ppm/api/v2/built-in-system-ppm/checklist/queryPpmMilepostChecklistList', {
            milepostId: record.milepostId,
            role: '销售部'
        }).then(data => {
            milepostState.xsData = data.dataList
        })
        post('/solution-ppm/api/v2/built-in-system-ppm/checklist/queryPpmMilepostChecklistList', {
            milepostId: record.milepostId,
            role: '财务'
        }).then(data => {
            milepostState.cwData = data.dataList
        })
        milepostState.checkVisible = true
    }

    const category = ref(null)
    watch(
        () => state.projectDetail,
        () => {
          console.log('监听亿欧');
            category.value = state.projectDetail.category
            if (category.value === 1) {
                mileColums.value = [
                    {
                        title: '项目阶段',
                        dataIndex: 'stageClassify',
                        ellipsis: true,
                        align: 'left',
                        width: '100px',
                        fixed: 'left',
                        customCell: item => {
                            const { rowIndex, rowSpan_stageClassify } = item
                            return {
                                rowSpan: rowSpan_stageClassify
                            }
                        }
                    },
                    {
                        dataIndex: 'milepostName',
                        title: '里程碑阶段名称',
                        width: 100,
                        fixed: 'left',
                        resizable: true
                    },
                    {
                        dataIndex: 'finishSchedule',
                        title: '完成进度',
                        width: '100px',
                        resizable: true
                    },
                    {
                        dataIndex: 'timeSchedule',
                        title: '时间进度',
                        width: '100px',
                        resizable: true
                    },
                    {
                        dataIndex: 'startTime',
                        title: '计划开始',
                        width: 110,
                        resizable: true
                    },
                    {
                        dataIndex: 'actualStartTime',
                        title: '实际开始',
                        width: 110,
                        resizable: true
                    },
                    {
                        dataIndex: 'endTime',
                        title: '计划完成',
                        ellipsis: false,
                        width: 110,
                        resizable: true
                    },
                    {
                        dataIndex: 'actualFinishTime',
                        title: '实际完成',
                        width: 110,
                        resizable: true
                    },
                    {
                        dataIndex: 'stateInput',
                        title: '工时情况',
                        width: '100px',
                        resizable: true
                    },
                    {
                        dataIndex: 'milepostStatus',
                        title: '项目阶段状态',
                        width: '120px',
                        resizable: true
                    },
                    {
                        dataIndex: 'workingDaysNum',
                        title: '预计工时(小时)',
                        width: 150,
                        resizable: true
                    },
                    {
                        dataIndex: 'actualWorkingDaysNum',
                        title: '实际工时(小时)',
                        width: 150,
                        resizable: true
                    },
                    {
                        dataIndex: 'taskNum',
                        title: '任务数',
                        width: 100,
                        resizable: true
                    },
                    {
                        dataIndex: 'milestoneBudget',
                        title: '项目阶段预算',
                        width: 120,
                        resizable: true
                    },
                    {
                        dataIndex: 'operation',
                        title: '操作',
                        fixed: 'right',
                        width: 150
                    }
                ]
            } else {
                mileColums.value = [
                    {
                        dataIndex: 'milepostName',
                        title: '项目阶段名称',
                        width: 200,
                        fixed: 'left',
                        resizable: true
                    },

                    {
                        dataIndex: 'finishSchedule',
                        title: '完成进度',
                        width: '250px',
                        resizable: true
                    },
                    {
                        dataIndex: 'timeSchedule',
                        title: '时间进度',
                        width: '250px',
                        resizable: true
                    },
                    {
                        dataIndex: 'startTime',
                        title: '计划开始',
                        width: 120,
                        resizable: true
                    },
                    {
                        dataIndex: 'actualStartTime',
                        title: '实际开始',
                        width: 120,
                        resizable: true
                    },
                    {
                        dataIndex: 'endTime',
                        title: '计划完成',
                        ellipsis: false,
                        width: 120,
                        resizable: true
                    },
                    {
                        dataIndex: 'actualFinishTime',
                        title: '实际完成',
                        width: 120,
                        resizable: true
                    },
                    {
                        dataIndex: 'stateInput',
                        title: '工时投入情况',
                        width: '120px',
                        resizable: true
                    },
                    {
                        dataIndex: 'milepostStatus',
                        title: '项目阶段状态',
                        width: '120px',
                        resizable: true
                    },
                    {
                        dataIndex: 'workingDaysNum',
                        title: '预计工时(小时)',
                        width: 150,
                        resizable: true
                    },
                    {
                        dataIndex: 'actualWorkingDaysNum',
                        title: '实际工时(小时)',
                        width: 150,
                        resizable: true
                    },
                    {
                        dataIndex: 'taskNum',
                        title: '任务数',
                        width: 100,
                        resizable: true
                    },
                    {
                        dataIndex: 'milestoneBudget',
                        title: '项目阶段预算',
                        width: 120,
                        resizable: true
                    },
                    {
                        dataIndex: 'operation',
                        title: '操作',
                        fixed: 'right',
                        width: 150
                    }
                ]
            }
        },
        {
            deep: true
        }
    )
    function resetMilepostList() {
        milepostState.searchForm = {}
        getMilepostTableData()
    }

    getMilepostTableData()

    function handlerDeleteMilepostItem(index) {
        milepostState.dataList.splice(index, 1)
    }

    function handlerAddMilepostItem(index) {
        milepostState.dataList.push({ ...dataItem })
    }

    function handleCreateMilepost() {
        milepostState.isEdit = false
        milepostState.title = '新建项目阶段'
        if (milepostState.dataList.length == 0) {
            milepostState.dataList.push({ ...dataItem })
        }
        milepostState.addOrEditMilepostVisible = true
    }

    function getGprojectPhase() {
        post('/solution-ppm/api/v2/built-in-system-ppm/checklist/queryProjectPhase', { projectType: '交付' }).then(
            data => {
                milepostState.projectPhaseList = data.dataList
            }
        )
    }

    function milepostStateCancel() {
        milepostState.addOrEditMilepostVisible = false
        resetMform()
    }

    function resetMform() {
        milepostState.dataList = []
        milepostState.dataList.push({ ...dataItem })
    }

    function handleSubmitMilePost() {
        milepostRef.value.validate().then(() => {
            milepostState.okLoading = true
            if (!milepostState.isEdit) {
                post(`/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${projectId.value}/add`, {
                    dataList: milepostState.dataList
                })
                    .then(data => {
                        milepostState.okLoading = true
                        if (data.code === 200) {
                            message.success('提交成功')
                            resetMform()
                            milepostState.addOrEditMilepostVisible = false
                            getMilepostTableData()
                        } else {
                            message.error(data.message)
                        }
                    })
                    .finally(() => {
                        milepostState.okLoading = false
                    })
            } else {
                post(
                    '/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/modificationSubmission',
                    milepostState.dataList[0]
                )
                    .then(data => {
                        if (data.code === 200) {
                            message.success('提交成功')
                            resetMform()
                            milepostState.addOrEditMilepostVisible = false
                            getMilepostTableData()
                        } else {
                            message.error(data.message)
                        }
                    })
                    .finally(() => {
                        milepostState.okLoading = false
                    })
            }
        })
    }

    function handlerEditMilepost(record) {
        milepostState.isEdit = true
        milepostState.title = '编辑项目阶段'
        getGprojectPhase()
        get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${record.milepostId}`).then(data => {
            data.data = { ...data.data, timeRangeList: [data.data.startTime, data.data.endTime] }
            milepostState.dataList[0] = data.data
            milepostState.addOrEditMilepostVisible = true
        })
    }

    function handlerDeleteMilepost(record) {
        const url = '/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/approveDeleteMilepost'
        const params = {
            milepostId: record.milepostId,
            projectId: projectId.value
        }
        del(url, { data: params }).then(resp => {
            if (resp.code === 200) {
                message.success('删除成功')
                getMilepostTableData()
            } else {
                message.error(resp.message)
            }
        })
    }

    const milepostRef = ref(null)
    const dataItem = {
        description: undefined,
        reasonsChange: undefined,
        milepostName: undefined,
        // 预算
        milestoneBudget: undefined,
        serialNumber: undefined,
        // 关联菜单
        projectPhaseId: undefined,
        timeRangeList: []
    }
    const mileColums = ref([
        {
            dataIndex: 'milepostName',
            title: '里程碑阶段名称',
            width: 200,
            fixed: 'left',
            resizable: true
        },
        {
            dataIndex: 'finishSchedule',
            title: '完成进度',
            width: '250px',
            resizable: true
        },
        {
            dataIndex: 'timeSchedule',
            title: '时间进度',
            width: '250px',
            resizable: true
        },
        {
            dataIndex: 'startTime',
            title: '计划开始',
            width: 120,
            resizable: true
        },
        {
            dataIndex: 'actualStartTime',
            title: '实际开始',
            width: 120,
            resizable: true
        },
        {
            dataIndex: 'endTime',
            title: '计划完成',
            ellipsis: false,
            width: 120,
            resizable: true
        },
        {
            dataIndex: 'actualFinishTime',
            title: '实际完成',
            width: 120,
            resizable: true
        },
        {
            dataIndex: 'stateInput',
            title: '工时投入情况',
            width: '120px',
            resizable: true
        },
        {
            dataIndex: 'milepostStatus',
            title: '项目阶段状态',
            width: '120px',
            resizable: true
        },
        {
            dataIndex: 'workingDaysNum',
            title: '预计工时(小时)',
            width: 150,
            resizable: true
        },
        {
            dataIndex: 'actualWorkingDaysNum',
            title: '实际工时(小时)',
            width: 150,
            resizable: true
        },
        {
            dataIndex: 'taskNum',
            title: '任务数',
            width: 100,
            resizable: true
        },
        {
            dataIndex: 'milestoneBudget',
            title: '项目阶段预算',
            width: 120,
            resizable: true
        },
        {
            dataIndex: 'operation',
            title: '操作',
            fixed: 'right',
            width: 150
        }
    ])
    const checkColumns = [
        {
            title: '序号',
            dataIndex: 'number'
        },
        {
            title: '检查项内容描述',
            dataIndex: 'checkEntry'
        }
    ]

    // 计算进度条颜色
    const progressColor = finishSchedule => {
        if (finishSchedule > 80) {
            return 'red'
        } else if (finishSchedule > 50) {
            return 'orange'
        } else {
            return 'green'
        }
    }

    function getMlNameList() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/milepost/query/milepost/name/${projectId.value}`).then(data => {
            milepostState.milepostList = data.dataList.map(item => {
                return {
                    ...item,
                    value: item.milepostName,
                    disabled: !!item.disabled,
                    label: item.milepostName
                }
            })
        })
    }

    function getMilepostTableData() {
        post('/solution-ppm/api/v2/built-in-system-ppm/project/stage/search', {
            ...milepostState.searchForm,
            projectId: projectId.value
        }).then(data => {
            milepostState.dataSource = groupMileData(data.data)
        })
    }
    function groupMileData(data) {
        if (!data || !data.length) return []

        let result = [...data]

        // 处理 stageClassify rowSpan
        let lastClassify = ''
        let classifyStartIndex = 0
        for (let i = 0; i <= result.length; i++) {
            if (i === result.length || result[i].stageClassify !== lastClassify) {
                const span = i - classifyStartIndex
                if (span > 0) {
                    result[classifyStartIndex].rowSpan_stageClassify = span
                    for (let j = classifyStartIndex + 1; j < i; j++) {
                        result[j].rowSpan_stageClassify = 0
                    }
                }
                classifyStartIndex = i
                lastClassify = result[i]?.stageClassify
            }
        }

        return result.map((item, index) => ({
            ...item,
            rowIndex: index
        }))
    }

    const taskTableHeight = ref(520)
    const taskHeaderOffset = ref(250)

    watch(
        () => props.useProjectId,
        val => {
            if (!props.useProjectId) {
                return
            }
            getProjectDetail()
            projectId.value = props.useProjectId
        },
        { immediate: true }
    )
    import { nextTick } from 'vue'

    function getProjectDetail() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_project/${props.useProjectId}`).then(async data => {
            state.projectDetail = data.data
            await nextTick()
            getMilepostTableData()
        })
    }

    const headerOffset = ref(200)
    const calcTableHeight = () => {
        taskTableHeight.value = window.innerHeight - 150 - headerOffset.value
    }
    onMounted(() => {
        calcTableHeight()
        window.addEventListener('resize', calcTableHeight)
    })
    onBeforeUnmount(() => {
        window.removeEventListener('resize', calcTableHeight)
    })
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .milepost-title {
        height: 25px;
        display: flex;
        line-height: 25px;
        border-left: 4px solid #3875ff;
        justify-content: space-between;
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 600;
    }
    /deep/ .form-content-milepost .ant3-form-item-label {
        width: 130px;
    }
    .form-content-milepost {
        display: inline-block;
        width: calc(100% - 80px);
    }
    .add-btn-milepost {
        margin-top: 20px;
    }
</style>
